<template>
  <div class="leader-dashboard">
    <!-- 左边 -->
    <div class="flex-item" style="width: 0; height: 100%; margin-right: 10px">
      <HomeCard icon="el-icon-menu" title="工作开展情况" body-class="work-card-body">
        <div class="flex-item flex-row flex-not-shrink" style="height: 0; margin-bottom: 10px">
          <div class="flex-column" style="width: 44%; margin-right: 10px">
            <InnerCard todo class="flex-item" style="margin-bottom: 10px" title="数据报送情况">
              <NumberCard
                class="flex-not-shrink"
                style="width: 110px"
                clickable
                title="任务总数"
                :number="data2.total"
                @click.native="openMx('PARTY-DATA-REPORT2')" />
              <div class="flex-item flex-column" style="height: 100%">
                <NumberCard class="flex-item" title="平均得分" grey-line horizon :number="data2.avg" />
                <NumberCard class="flex-item" title="按时完成率" grey-line horizon :number="`${data2.zswcl || 0}%`" />
              </div>
            </InnerCard>
            <InnerCard class="flex-item" title="谈话情况">
              <NumberCard
                style="width: 120px; padding: 10px"
                clickable
                title="谈话总数"
                :number="data12.reduce((acc, cur) => acc + cur.value, 0)"
                @click.native="openMx('TAN-HUA-MX2')" />
              <div class="flex-item" style="width: 0; height: 100%">
                <ECharts
                  :options="managerAverageAge"
                  style="overflow: hidden"
                  auto-resize
                  @click="e => openMx('TAN-HUA-RC-MX2', { jobLevel: getChartValue(e) })" />
              </div>
            </InnerCard>
          </div>
          <div class="flex-item" style="width: 0">
            <InnerCard title="任务完成情况" body-class="flex-column">
              <div class="flex-row" style="height: 152px">
                <NumberCard
                  class="flex-not-shrink"
                  clickable
                  title="任务总数"
                  :number="data4.rwzs"
                  style="width: 120px"
                  @click.native="openMx('PARTY-TASK3')" />
                <div class="progress-item flex-item flex-column vertical-center horizon-center" style="width: 0">
                  <ElProgress
                    type="circle"
                    stroke-linecap="square"
                    :percentage="data4.wcjd ? Number(data4.wcjd.replace('%', '')) : 0"
                    :stroke-width="14"
                    :width="100" />
                  <p style="margin-top: 10px; text-align: center">完成进度</p>
                </div>
                <div class="progress-item-orange flex-item flex-column vertical-center horizon-center" style="width: 0">
                  <ElProgress
                    type="circle"
                    stroke-linecap="square"
                    :percentage="data4.aswcl ? Number(data4.aswcl.replace('%', '')) : 0"
                    :stroke-width="14"
                    :width="100" />
                  <p style="margin-top: 10px; text-align: center">按时完成率</p>
                </div>
              </div>
              <div class="flex-item" style="height: 0">
                <ECharts
                  :options="getWorkLine"
                  auto-resize
                  @click="e => openMx('PARTY-TASK2', { ranking: getChartValue(e) })" />
              </div>
            </InnerCard>
          </div>
        </div>
        <div class="flex-row flex-not-shrink" style="height: 50%">
          <InnerCard
            title="廉洁风险防控情况"
            class="flex-item"
            style="width: 0; height: 100%; margin-right: 10px"
            body-class="flex-column">
            <ProgressCard
              color="#feb254"
              :percentage="getPercent(Math.round((data8.ywljfxd / data8.zs) * 100))"
              class="flex-item">
              <template #title>
                风险点总数：
                <span class="clickable" @click="openMx('PARTY-RISK2', { type: '' })">{{ data8.zs }}</span>
              </template>
              <template #bottom-left>
                <span class="text_grey">业务廉洁风险点：</span
                ><span class="clickable" style="font-weight: bold" @click="openMx('PARTY-RISK2', { type: 'YW' })">{{
                  data8.ywljfxd
                }}</span>
              </template>
              <template #bottom-right>
                <span class="text_grey">岗位廉洁风险点：</span
                ><span class="clickable" style="font-weight: bold" @click="openMx('PARTY-RISK2', { type: 'GW' })">
                  {{ data8.gwljfxd }}
                </span>
              </template>
            </ProgressCard>
            <ProgressCard
              v-if="Object.keys(data7).length"
              class="flex-item"
              :percentage="getPercent(Math.round((data7[2].value / (data7[1].value + data7[2].value)) * 100))">
              <template #title>
                风险立项总数：
                <span class="clickable" @click="openMx('PARTY-RISK-PROJECT2')">{{
                  data7[1].value + data7[2].value
                }}</span>
              </template>
              <template #bottom-left>
                <span class="text_grey">已完成：</span>
                <span
                  class="clickable"
                  style="font-weight: bold"
                  @click="openMx('PARTY-RISK-PROJECT2', { status: 2 })"
                  >{{ data7[2].value }}</span
                >
              </template>
              <template #bottom-right>
                <span class="text_grey">未完成：</span>
                <span
                  class="clickable"
                  style="font-weight: bold"
                  @click="openMx('PARTY-RISK-PROJECT2', { status: 1 })"
                  >{{ data7[1].value }}</span
                >
              </template>
            </ProgressCard>
          </InnerCard>
          <InnerCard title="监督检查情况" body-class="flex-column" class="flex-item" style="width: 0; height: 100%">
            <ProgressCard :progress-bar="false" class="flex-item" title="招采监督情况">
              <template #bottom-left>
                <span class="text_grey">监督项目总数：</span>
                <b style="font-weight: bold" class="clickable" @click="openMx('PARTY-PURCHASE')">{{
                  data1.xmzs || 0
                }}</b>
              </template>
              <template #bottom-right>
                <span class="text_grey">发现问题数：</span>
                <span
                  style="color: #f63549; font-weight: bold"
                  class="clickable"
                  @click="openMx('PARTY-PURCHASE-PROBLEM')"
                  >{{ data1.fxwts || 0 }}</span
                >
              </template>
            </ProgressCard>
            <ProgressCard
              v-if="Object.keys(data11).length"
              class="flex-item"
              :percentage="getPercent(Math.round((data11[2].value / (data11[1].value + data11[2].value)) * 100))"
              title="专项监督检查情况">
              <template #top-right>
                任务总数：<span style="font-weight: bold" class="clickable" @click="openMx('PARTY-MONITOR2')">{{
                  data11[1].value + data11[2].value
                }}</span>
              </template>
              <template #bottom-left>
                <span class="text_grey">已完成：</span
                ><span style="font-weight: bold" class="clickable" @click="openMx('PARTY-MONITOR2', { status: 2 })">{{
                  data11[2].value
                }}</span>
              </template>
              <template #bottom-right>
                <span class="text_grey">未完成：</span
                ><span style="font-weight: bold" class="clickable" @click="openMx('PARTY-MONITOR2', { status: 1 })">{{
                  data11[1].value
                }}</span>
              </template>
            </ProgressCard>
            <ProgressCard
              v-if="Object.keys(data9).length"
              class="flex-item"
              :percentage="getPercent(Math.round((data9[2].value / (data9[1].value + data9[2].value)) * 100))"
              title="重点事项督办情况">
              <template #top-right>
                事项总数：<span
                  style="font-weight: bold"
                  class="clickable"
                  @click="openMx('PARTY-IMPORTANT-MONITOR2')"
                  >{{ data9[1].value + data9[2].value }}</span
                >
              </template>
              <template #bottom-left>
                <span class="text_grey">已完成：</span
                ><span
                  style="font-weight: bold"
                  class="clickable"
                  @click="openMx('PARTY-IMPORTANT-MONITOR2', { status: 2 })"
                  >{{ data9[2].value }}</span
                >
              </template>
              <template #bottom-right>
                <span class="text_grey">未完成：</span
                ><span
                  style="font-weight: bold"
                  class="clickable"
                  @click="openMx('PARTY-IMPORTANT-MONITOR2', { status: 1 })"
                  >{{ data9[1].value }}</span
                >
              </template>
            </ProgressCard>
          </InnerCard>
        </div>
      </HomeCard>
    </div>
    <!-- 右边 -->
    <div style="width: 30%; height: 100%" class="flex-column flex-not-shrink">
      <HomeCard
        icon="el-icon-s-check"
        class="flex-item"
        style="height: 0; margin-bottom: 10px"
        title="廉洁广药"
        :badge="governmentCultureCount">
        <template #header-right>
          <div class="more" @click="$router.push('/news')">更多<i class="el-icon-arrow-right"></i></div>
        </template>
      </HomeCard>
      <HomeCard
        icon="el-icon-chat-line-square"
        class="flex-not-shrink"
        style="height: 47%"
        title="通知公告"
        :badge="notificationCount">
        <template #header-right>
          <div class="more" @click="$router.push('/notice/2')">更多<i class="el-icon-arrow-right"></i></div>
        </template>
        <Notification
          @total="
            total => {
              notificationCount = total
            }
          " />
      </HomeCard>
    </div>
    <!-- svg -->
    <div class="svg-box">
      <!-- 渐变绿色 -->
      <svg width="100%" height="100%">
        <defs>
          <linearGradient id="green" x1="100%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color: rgb(207, 245, 209)" stop-opacity="1" />
            <stop offset="100%" style="stop-color: rgb(44, 185, 52)" stop-opacity="1" />
          </linearGradient>
        </defs>
      </svg>
      <!-- 渐变黄色 -->
      <svg width="100%" height="100%">
        <defs>
          <linearGradient id="orange" x1="10%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color: rgb(207, 226, 241)" stop-opacity="1" />
            <stop offset="100%" style="stop-color: rgb(65, 158, 252)" stop-opacity="1" />
          </linearGradient>
        </defs>
      </svg>
      <!-- svg 内阴影 -->
      <svg width="100%" height="100%">
        <filter id="inner-shadow" x="-50%" y="-50%" width="200%" height="200%">
          <feComponentTransfer in="SourceAlpha">
            <feFuncA type="table" tableValues="1 0" />
          </feComponentTransfer>
          <feGaussianBlur stdDeviation="2" />
          <feOffset dx="0" dy="1" result="offsetblur" />
          <feFlood flood-color="#ddd" flood-opacity="0.1" result="color" />
          <feComposite in2="offsetblur" operator="in" />
          <feComposite in2="SourceAlpha" operator="in" />
          <feMerge>
            <feMergeNode in="SourceGraphic" />
            <feMergeNode />
          </feMerge>
        </filter>
      </svg>
    </div>
  </div>
</template>

<script>
  import HomeCard from './HomeCard'
  import InnerCard from './InnerCard'
  import NumberCard from './NumberCard'
  import ProgressCard from './ProgressCard'
  import Notification from '@/views/module/home/Notification'
  import { getPercent } from '@/util'
  import { mapState } from 'vuex'
  import * as echarts from 'echarts/core'
  // 引入柱状图图表，图表后缀都为 Chart
  import { BarChart, LineChart, PieChart } from 'echarts/charts'
  // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
  import {
    DatasetComponent,
    GridComponent,
    LegendComponent,
    TitleComponent,
    TooltipComponent
  } from 'echarts/components'
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { SVGRenderer } from 'echarts/renderers'

  // 注册必须的组件
  echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DatasetComponent,
    SVGRenderer,
    BarChart,
    LineChart,
    PieChart
  ])

  export default {
    name: 'LeaderDashboard',
    components: { Notification, ProgressCard, NumberCard, InnerCard, HomeCard },
    props: {
      query: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        managerAverageAge: {},
        getWorkLine: {},
        data1: {},
        data2: {},
        data4: {},
        data7: {},
        data8: {},
        data9: {},
        data11: {},
        data12: [],
        notificationCount: 0,
        governmentCultureCount: 0
      }
    },
    computed: {
      ...mapState('user', {
        unitName: state => state.ouInfos[0].unitName,
        unitFullCode: state => state.ouInfos[0].unitFullCode,
        ouName: state => state.ouInfos[0].ouName,
        ouFullCode: state => state.ouInfos[0].ouFullCode,
        unitId: state => state.ouInfos[0].unitId
      })
    },
    created() {
      this.search()
    },
    methods: {
      getPercent,
      getChartValue() {
        return 0
      },
      async search() {},
      openMx(code, query = {}) {},
      // 招采监督情况
      toMx(code) {
        if (code === 'xmzs') {
          this.$router.push({
            path: '/purchase-monitor-management/jdXmMx/',
            query: this.query
          })
        } else if (code === 'fxwts') {
          this.$router.push({
            path: '/purchase-monitor-management/jdFxWtMx/',
            query: this.query
          })
        }
      },
      // 风险点
      async toFxdmx(type) {
        await this.$router.push({
          path: `/honest-risk-protect/fengXianDianMx/${type}-${this.query.ouFullCode}`,
          query: {
            ...this.query,
            showDatePicker: true,
            type
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .leader-dashboard {
    @include flex-row;
    height: 100%;
    padding-bottom: 10px;

    .work-card-body {
      @include flex-column;
    }

    .svg-box {
      width: 0;
      height: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .home-card-body {
      padding: 10px;
    }

    .progress-item {
      // 进度条颜色
      svg > path:nth-child(2) {
        stroke: url('#green');
      }

      // 修改圆环底色
      .el-progress-circle__track {
        filter: url('#inner-shadow'); // 圆环底色内阴影
        stroke: #f0f0f0;
        stroke-width: 10px !important; // 大小
      }

      // 修改进度条内容方向
      .el-progress--circle .el-progress__text,
      .el-progress--dashboard .el-progress__text {
        transform: translate(0, -50%);
      }
    }

    .progress-item-orange {
      // 进度条颜色
      svg > path:nth-child(2) {
        stroke: url('#orange');
      }

      // 修改圆环底色
      .el-progress-circle__track {
        filter: url('#inner-shadow'); // 圆环底色内阴影
        stroke: #f0f0f0;
        stroke-width: 10px !important; // 大小
      }

      // 修改进度条内容方向
      .el-progress--circle .el-progress__text,
      .el-progress--dashboard .el-progress__text {
        transform: translate(0, -50%);
      }
    }
  }
</style>
